<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    <title>Title</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>
<div id="app">
    <el-card class="box-card">
        <span style="margin-left: 10px"> 员工名称：</span>
        <el-input
                style="display: inline-block;width: 200px;margin-left: 10px"
                placeholder="请输入员工名称"
                prefix-icon="el-icon-user"
                v-model="input1"
        >
        </el-input>
        <span style="margin-left: 20px"> 部门：</span>
        <el-select v-model="input2" placeholder="请选择部门">
            <el-option value="" label="不选择部门"></el-option>
            <el-option v-for="department in selectDepartmentData" :label="department.name" :value="department.id" ></el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="searchUser" style="margin-left: 30px">搜索</el-button>
        <br/>
        <br/>
        <template>
            <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">添加用户</el-button>
            <el-button type="success" icon="el-icon-plus" @click="getTree">用户授权</el-button>
            <br/>
            <br/>

            <el-table
                    :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"
                    @row-click="rowClick">
                <el-table-column >

                    <template slot-scope="scope" >
                        <el-checkbox v-model="currentId == scope.row.id"></el-checkbox>
                    </template>

                </el-table-column>
                <el-table-column
                        v-if="show"
                        label="ID"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="员工编号"
                        prop="no">
                </el-table-column>
                <el-table-column
                        label="用户名"
                        prop="userName">
                </el-table-column>

                <el-table-column
                        v-if="show"
                        label="用户密码"
                        prop="passWord">
                </el-table-column>

                <el-table-column
                        label="真实姓名"
                        prop="realName">
                </el-table-column>

                <el-table-column
                        label="性别"
                        prop="sex">
                </el-table-column>
                <el-table-column
                        v-if="show"
                        label="年"
                        prop="birYear">
                </el-table-column>
                <el-table-column
                        v-if="show"
                        label="月"
                        prop="birMonth">
                </el-table-column>
                <el-table-column
                        v-if="show"
                        label="日"
                        prop="birDay">
                </el-table-column>

                <el-table-column
                        v-if="show"
                        label="个人邮箱"
                        prop="userEmail">
                </el-table-column>

                <el-table-column
                        v-if="show"
                        label="联系方式"
                        prop="userTel">
                </el-table-column>

                <el-table-column
                        label="公司"
                        prop="companyName">
                </el-table-column>

                <el-table-column
                        v-if="show"
                        label="查询次数"
                        prop="queryTimes">
                </el-table-column>

                <el-table-column
                        v-if="show"
                        label="入职时间"
                        prop="entryTime">
                </el-table-column>

                <el-table-column
                        v-if="show"
                        label="员工成绩"
                        prop="grade">
                </el-table-column>

                <el-table-column
                        label="员工状态"
                        prop="status">
                </el-table-column>

                <el-table-column
                        label="职位"
                        prop="postName">
                </el-table-column>

                <el-table-column
                        label="所属部门"
                        prop="departmentName">
                </el-table-column>
                <el-table-column prop="userImage" label="头像" width="120">
                    <template slot-scope="scope">
                        <el-avatar  :size="65" :src="scope.row.userImage"
                        ></el-avatar >
                    </template>
                </el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <br>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="changePage"
                align="center">
        </el-pagination>
    </el-card>

    <el-dialog title="角色管理" :visible.sync="dialogFormVisible"  @close="clearForm2" >
        <el-form :model="form" >
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="form.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" :label-width="formLabelWidth" >
                <el-input v-model="form.passWord" autocomplete="off" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" :label-width="formLabelWidth">
                <el-input v-model="form.realName" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.sex" autocomplete="off"></el-input>
            </el-form-item>-->

            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio-group v-model="form.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="年" :label-width="formLabelWidth">
                <el-input v-model="form.birYear" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="月" :label-width="formLabelWidth">
                <el-input v-model="form.birMonth" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日" :label-width="formLabelWidth">
                <el-input v-model="form.birDay" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="个人邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.userEmail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" :label-width="formLabelWidth">
                <el-input v-model="form.userTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="个人状态" :label-width="formLabelWidth">
                <el-input v-model="form.userStatus" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="公司id" :label-width="formLabelWidth">
                <el-input v-model="form.companyId" autocomplete="off"></el-input>
            </el-form-item>-->

            <el-form-item label="查询次数" :label-width="formLabelWidth">
                <el-input v-model="form.queryTimes" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="入职时间" :label-width="formLabelWidth">
                <el-input v-model="form.entryTime" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="入职时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.entryTime"
                        type="datetime"
                        placeholder="选择日期时间"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="员工编号" :label-width="formLabelWidth">
                <el-input v-model="form.no" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工成绩" :label-width="formLabelWidth">
                <el-input v-model="form.grade" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="员工状态" :label-width="formLabelWidth">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">正式员工</el-radio>
                    <el-radio :label="2">试用期员工</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="公司名称" :label-width="formLabelWidth">
                <el-select v-model="form.companyId" placeholder="活动区域" @change="loadDepartment">
                    <el-option v-for="company in companyData2" :label="company.companyName" :value="company.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-select v-model="form.did" placeholder="部门" @change="selectDepartment">
                    <el-option v-for="department in departmentData" :label="department.name" :value="department.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-select v-model="form.pid" placeholder="职位">
                    <el-option v-for="post in postData" :label="post.name" :value="post.id" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        name="pic"
                        class="avatar-uploader"
                        action="/user/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="userEdit" >确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="角色管理" :visible.sync="dialogTreeVisible" @close="clearData">
        <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @check-change="checkChange">
        </el-tree>
    </el-dialog>
</div>
</body>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData: [],
            treeData:[],
            defaultProps: {
                label: 'roleName'
            },
            companyData2:[],//公司信息
            departmentData:[],//部门信息
            selectDepartmentData:[],//部门信息
            postData:[],//职位信息
            show:false,
            currentId:"",
            disabled:false,

            form:{
                id:"",
                passWord:"",
                userName:"",
                realName:"",
                userImage:"",
                sex:"",
                birYear:"",
                birMonth:"",
                birDay:"",
                userEmail:"",
                userTel:"",
                userStatus:"",
                companyId:"",
                queryTimes:0,
                entryTime:"",
                no:"",
                grade:"",
                status:"",
                pid:"",
                did:"",
            },
            dialogFormVisible:false,
            dialogTreeVisible:false,
            formLabelWidth:"100px",
            search: '',
            total:0,
            pageSize:0,
            imageUrl:"",
            change:false,
            statueValue:false,
            input1:'',
            input2:'',

        },
        methods: {
            searchUser(){
                console.log(this.input1);
                console.log(this.input2);
                var name = this.input1;
                var pid = this.input2;
                if (this.input1 ==""){
                    name = "404";
                }
                if (this.input2 ==""){
                    pid = "404";
                }

                axios.get("/user/page/"+name+"/"+pid+"/"+1)
                    .then(res =>{
                        if (res.data.code == 1){
                            this.tableData = res.data.data.records;
                            console.log(this.tableData);
                            this.total = res.data.data.total;
                            this.pageSize = 8;

                        }
                    })
            },
            //编辑user
            handleEdit(index, row) {

                this.disabled = true;
                this.form.id = row.id;
                this.imageUrl = row.userImage;
                this.form.passWord = row.passWord;
                this.form.userName = row.userName;
                this.form.realName = row.realName;
                /*this.form.sex = row.sex;*/
                if (row.sex == "男"){
                    this.form.sex = 1
                }else{
                    this.form.sex = 2
                };
                this.form.birYear = row.birYear;
                this.form.birMonth = row.birMonth;
                this.form.birDay = row.birDay;
                this.form.userEmail = row.userEmail;
                this.form.userTel = row.userTel;
                this.form.userStatus = row.userStatus;
                this.form.companyId = row.companyId;
                this.form.queryTimes = row.queryTimes;
                this.form.entryTime = row.entryTime;
                this.form.no = row.no;
                this.form.grade = row.grade;
                if (row.status == "正式员工"){
                    this.form.status = 1
                }else{
                    this.form.status = 2
                }
                //this.form.status = row.status;
                this.form.pid = row.pid;
                this.form.did = row.did;
                this.dialogFormVisible = true;
                /*this.form = this.row;
                console.log(index, row);*/
                if (this.form.companyId!=""){
                    this.loadDepartment();
                    if (this.departmentData.did!=""){
                        this.loadPost();
                    }

                }
            },

            //删除user
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/user/"+row.id)
                        .then(value => {
                            if (value.data.code==1){
                                this.loadUsers(1);
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })

            },

            //分页切换
            changePage(page){
                this.loadUsers(page);
                localStorage.setItem("page",page);
            },

            //用户编辑（添加、修改）
            userEdit(){
                if (this.form.status == "1"){
                    this.form.status = "正式员工"
                }else if (this.form.status == "2"){
                    this.form.status = "试用期员工"
                };

                if (this.form.sex == "1"){
                    this.form.sex = "男"
                }else if(this.form.sex =="2"){
                    this.form.sex = "女"
                };
                if (this.form.id == ""){
                    axios.post("/user",
                        {
                            userImage:this.imageUrl,
                            passWord:this.form.passWord,
                            userName:this.form.userName,
                            realName:this.form.realName,
                            sex:this.form.sex,
                            birYear:this.form.birYear,
                            birMonth:this.form.birMonth,
                            birDay :this.form.birDay,
                            userEmail:this.form.userEmail,
                            userTel:this.form.userTel,
                            userStatus:this.form.userStatus,
                            companyId:this.form.companyId,
                            queryTimes:this.form.queryTimes,
                            entryTime:this.form.entryTime,
                            no:this.form.no ,
                            grade:this.form.grade  ,
                            status:this.form.status ,
                            pid:this.form.pid ,
                            did:this.form.did}
                    )
                        .then(res =>{
                            if (res.data.code == 1){
                                this.$message({
                                    type:"success",
                                    message:"添加成功"
                                })
                            }else{
                                this.$message({
                                    type:"error",
                                    message:res.data.data
                                })
                            }
                            this.loadUsers(localStorage.getItem("page"));
                        })

                }else{

                    axios.put("/user",{
                        id:this.form.id,
                        userImage:this.imageUrl,
                        passWord:this.form.passWord,
                        userName:this.form.userName,
                        realName:this.form.realName,
                        sex:this.form.sex,
                        birYear:this.form.birYear,
                        birMonth:this.form.birMonth,
                        birDay :this.form.birDay,
                        userEmail:this.form.userEmail,
                        userTel:this.form.userTel,
                        userStatus:this.form.userStatus,
                        companyId:this.form.companyId,
                        queryTimes:this.form.queryTimes,
                        entryTime:this.form.entryTime,
                        no:this.form.no ,
                        grade:this.form.grade  ,
                        status:this.form.status ,
                        pid:this.form.pid ,
                        did:this.form.did
                    })
                        .then(res =>{
                            if (res.data.code == 1){
                                this.$message({
                                    type:"success",
                                    message:"修改成功"
                                })
                            }
                            this.loadUsers(localStorage.getItem("page"));
                        })
                }
                this.dialogFormVisible = false;

            },

            //清除form表单数据
            clearForm2(){
                this.form.id = "";
                this.form.userImage =  "";
                this.imageUrl="";
                this.form.passWord =  "";
                this.form.userName =  "";
                this.form.realName =  "";
                this.form.sex =  "";
                this.form.birYear =  "";
                this.form.birMonth =  "";
                this.form.birDay =  "";
                this.form.userEmail = "";
                this.form.userTel =  "";
                this.form.userStatus =  "";
                this.form.companyId =  "";
                this.form.queryTimes =  0;
                this.form.entryTime =  "";
                this.form.no =  "";
                this.form.grade =  "";
                this.form.status =  "";
                this.form.pid =  "";
                this.form.did =  "";
                this.disabled = false;
            },

            //图片回显
            handleAvatarSuccess(res, file) {
                this.imageUrl=res.data;
            },

            //上传图片
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 10;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                }
                return isJPG && isLt2M;
            },

            //加载表格分页数据
            loadUsers(page){
                axios.get("/user/page/404/404/"+page)
                    .then(res =>{
                        if (res.data.code == 1){
                            this.tableData = res.data.data.records;
                            console.log(this.tableData);
                            this.total = res.data.data.total;
                            this.pageSize = 8;
                        }
                    })
            },

            //加载所有的数据
            loadCompanyData(){
                axios.get("/companies")
                    .then(res =>{
                        this.companyData2 = res.data.data;
                        console.log( this.companyData2 )
                    });
            },
            loadDepartment(){
                //this.departmentData=[];
                //console.log(this.form.companyId);
                axios.get("/departments/"+this.form.companyId)
                    .then(res =>{
                        this.departmentData = res.data.data;
                        console.log( this.departmentData )
                    });
            },
            loadSelectDepartment(){
                //this.departmentData=[];
                //console.log(this.form.companyId);
                axios.get("/departments")
                    .then(res =>{
                        this.selectDepartmentData = res.data.data;

                    });
            },
            selectDepartment(){
                this.form.pid ="";
                this.loadPost();
            },
            loadPost(){
                axios.get("/posts/"+this.form.did)
                    .then(res=>{
                        this.postData = res.data.data;
                        console.log( this.postData )
                    })
            },
            //当行被点击
            rowClick(row, column, event){
                if (this.currentId!=row.id){
                    this.currentId = row.id;
                }else{
                    this.currentId = "";
                }
                console.log(this.currentId);
            },

            //获得当前用户树的信息
            getTree(){
                if (this.currentId==""){
                    this.$message({
                        type:"warning",
                        message:"请选择需要操作的用户"
                    })

                } else{
                    this.dialogTreeVisible = true;
                    //得到tree的信息（通过id查询角色）
                    axios.get("/userRole/"+this.currentId)
                        .then(res =>{
                            if (res.data.code ==1){
                                this.$refs.tree.setCheckedKeys(res.data.data);
                                setTimeout(() => {this.change = true;},500);
                            }
                        })
                }

            },

            //加载树
            loadTree(){
                axios.get("/role/roles")
                    .then(res =>{
                        if (res.data.code ==1){
                            this.treeData = res.data.data;
                            console.log(this.treeData);
                        }
                    })
            },

            //当树的节点被点击
            checkChange(row,checked,childChecked){
                console.log(row.id)
                console.log(checked)
                if (this.change){
                    if (checked){
                        axios.post("/userRole/"+this.currentId+"/"+row.id)
                            .then(res=>{
                                if (res.data.code==1){
                                    this.$message({
                                        type:"success",
                                        message:"授权成功！"
                                    })
                                }else{
                                    this.$message({
                                        type:"error",
                                        message:"授权失败！"
                                    })
                                }
                            })
                    }else{
                        axios.delete("/userRole/"+this.currentId+"/"+row.id)
                            .then(res=>{
                                if (res.data.code==1){
                                    this.$message({
                                        type:"success",
                                        message:"取消授权成功！"
                                    })
                                }else{
                                    this.$message({
                                        type:"error",
                                        message:"取消授权失败！"
                                    })
                                }
                            })
                    }
                }
            },

            //清除change数据
            clearData(){
                this.change = false;
            }
        },

        mounted(){
            //加载数据
            this.loadUsers(1);
            this.loadCompanyData();
            this.loadSelectDepartment();
            this.loadTree();
        }
    });
</script>


</html>